<template>
  <inject-template :item="item" :pageId="pageId" :popId="popId" :isPropagation="false">
    <template v-slot:common>
      <div class="wb-radio" :data-id="item.id" :style="commonStyle">
        <div v-if="item.commonAttr.title.length > 0" class="radio-title" :style="titleStyle" @click.stop>
          <strong>{{commonAttr.title}}</strong>
          <span v-show="item.commonAttr.need">*</span>
        </div>
        <van-radio-group v-model="radioSelected" class="radio-group" :style="flexDirection">
          <van-cell-group v-for="(item_, index) in item.lists" :border="false" :key="index" :style="itemConStyle" class="radio-cell-group">
            <div :style="itemStyle" @click.stop="onRadio($event, index)" :data-id="item_.id">
              <div class="wid-hei-inherit" v-if="item.commonAttr.isPic"><img v-lazy="item_.url" /></div>
              <div v-if="commonAttr.itemType == RADIO_CHECKBOX_TYPE_MAP.btn" :ref="setBtnRef" class="radio-btn" :style="radioCheckboxBtnStyle(index)" v-html="item_.text"></div>
              <template v-else-if="commonAttr.itemType == RADIO_CHECKBOX_TYPE_MAP.selectedFrame">
                <van-radio v-if="commonAttr.itemStyles.url" :style="radioCheckboxBtnStyle(index)" :ref="setRadiosRef" :name="index+1" :shape="commonAttr.shape" :checked-color="commonAttr.selectedStyles.backgroundColor">
                  {{item_.text}}
                  <template #icon="props"><img :style="iconStyle" class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" /></template>
                </van-radio>
                <van-radio v-else :style="radioCheckboxBtnStyle(index)" :ref="setRadiosRef" :name="index+1" :shape="commonAttr.shape" :checked-color="commonAttr.selectedStyles.backgroundColor">{{item_.text}}</van-radio>
              </template>
              <div v-else class="radio-btn-con">
                <div :ref="setBtnRef" class="radio-btn" :style="radioCheckboxBtnStyle(index)">{{item_.text}}</div>
                <van-radio v-if="commonAttr.itemStyles.url" class="margin-left-8" :style="radioCheckboxBtnStyle_" :ref="setRadiosRef" :name="index+1" :shape="commonAttr.shape" :checked-color="commonAttr.selectedStyles.backgroundColor">
                  <template #icon="props"><img :style="iconStyle" class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" /></template>
                </van-radio>
                <van-radio v-else class="margin-left-8" :style="radioCheckboxBtnStyle_" :ref="setRadiosRef" :name="index+1" :shape="commonAttr.shape" :checked-color="commonAttr.selectedStyles.backgroundColor"></van-radio>
              </div>
            </div>
          </van-cell-group>
        </van-radio-group>
        <div v-if="commonAttr.isOther" class="radio-other padding-0-8">
          <span class="padding-4">其他</span>
          <van-field class="padding-4 border-grey" v-model="otherText" :placeholder="commonAttr.otherPlaceholder" :border="false" @input="onRadioInput"/>
        </div>
      </div>
    </template>
  </inject-template>
</template>

<script>
import InjectTemplate from '@/components/inject-template.vue'
import { utils } from '@/components/utils/utils'
import { commonUtils } from '@/components/utils/common-utils'
import { radioCheckbox } from "@/components/js/radio-checkbox"
import { ref, onBeforeUpdate } from 'vue'
import { getCompIdByParam, isJSON } from '@/plugins/utils'
import { COMPONENT_TYPES } from '@/common/const-wb'
import { INJECT_GROUP_CLASS_NAME } from '@/common/const-inject-class'

export default {
  name: 'WbRadio',
  mixins: [utils, commonUtils, radioCheckbox],
  props:{
    item: Object
  },
  setup () {
    let btnRefs = []
    let radiosRefs = []
    // let checkboxsRefs = []
    const setBtnRef = el => {
      btnRefs.push(el)
    }
    const setRadiosRef = el => {
      radiosRefs.push(el)
    }
    // const setCheckboxsRef = el => {
    //   checkboxsRefs.push(el)
    // }
    onBeforeUpdate(() => {
      btnRefs = []
      radiosRefs = []
      // checkboxsRefs = []
    })
    return {
      btnRefs,
      radiosRefs,
      // checkboxsRefs,
      setRadiosRef,
      // setCheckboxsRef,
      setBtnRef,
      radioSelected: ref(0),
      otherText: ref('')
    }
  },
  created() {
    const relateAttrCompId = getCompIdByParam(this.commonAttr.relateAttrCompId);
    let relateComponentData = this.componentMap[relateAttrCompId];

    if(relateComponentData && relateComponentData.events.interactionData) {
      let item = relateComponentData.interactionData.lists[this.commonAttr.itemIndex];
      if(item.params && isJSON(item.params)){
        this.$store.commit("updateComponentAttr", { id: this.item.id, lists: JSON.parse(item.params) });
        // this.item.lists = JSON.parse(item.params)
      }
    }
    if(this.commonAttr.itemCircleColor && this.commonAttr.itemCircleColor !== 'rgba(0, 0, 0, 0)'){
      document.documentElement.style.setProperty('--van-radio-border-color', this.commonAttr.itemCircleColor)
    }
    if(this.commonAttr.itemTickColor && this.commonAttr.itemTickColor !== 'rgba(0, 0, 0, 0)'){
      document.documentElement.style.setProperty('--van-white', this.commonAttr.itemTickColor)
    }
  },
  components: {
    InjectTemplate,
  }
}
</script>
<style lang="scss">
.wb-radio {
  width: inherit;
  height: inherit;

  .radio-group{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: flex-start;

    .radio-cell-group{
      background-color: inherit;

      .radio-btn-con{
        display: flex;
        flex-direction: row;
      }
      .radio-btn{
        display: flex;
        justify-content: center;
        justify-items: center;
        align-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        flex-flow: 1;
        background-repeat: no-repeat;
        background-size: contain;
      }
      img{
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
  }
  .radio-other{
    display: flex;
    flex-direction: row;
    justify-items: center;
    justify-content: center;

    span{
      width: 14%;
      display: inline-block;
    }
  }
  .radio-title {
    color: inherit;
    background-color: initial;

    span{
      color:red;
    }

    h3 {
      display: inline-block;
      color: inherit;
      background-color: inherit;
      line-height: 1.5;
    }
  }
}

</style>
